<template>
    <div class="oa-current">
        <div id="header-operate">
            <el-form id="header-query" label-width="100px" ref="searchParams" :model="searchParams">
                <el-form-item label="任务标题" prop="title">
                    <el-input v-model="searchParams.title" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="发起时间" prop="startDate">
                    <el-date-picker
                        v-model="searchParams.startDate"
                        type="date"
                        size="mini"
                        value-format="yyyyMMdd"
                        format="yyyy-MM-dd"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="任务状态" prop="statusList" v-if="type == 'history'">
                    <el-select v-model="searchParams.statusList" size="mini" filterable clearable multiple collapse-tags>
                        <el-option v-for="(value, key) in statusPojo" :key="key" :label="value" :value="key"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label-width="10px">
                    <el-button type="primary" size="mini" @click="handleButton('search')">查询</el-button>
                    <el-button size="mini" @click="handleButton('reStart')" v-if="type == 'current'">重新发起</el-button>
                    <el-button size="mini" @click="handleButton('delete')" v-if="type == 'current'">删除任务</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div :style="{ height: 'calc(100% - 80px)' }">
            <RiskTableP
                :ref="'risk-table-' + type"
                :tableConfig="tableConfig"
                :tableData="tableData"
                :paging="paging"
                :column="columns"
                v-loading="tableLoading"
                @page-change="getTableData"
            >
            </RiskTableP>
        </div>
    </div>
</template>
<script lang="ts">
import RiskTableP from '@/common/components/risk-table-plus.vue';
import { PageVO, TableConfigVO, VueObject } from '@/common/vo';
import { dateFormat, timeFormat } from '@/utils/tools';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import XEUtils from 'xe-utils';
import API from '../api/process-handling';

@Component({ name: 'OaTaskTab', components: { RiskTableP } })
export default class OaTaskTab extends Vue {
    searchParams: any = {
        title: '',
        statusList: [],
        startDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
    };
    tableConfig: TableConfigVO = {
        rowKey: 'requestId', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableData: any[] = [];
    paging: PageVO = {
        total: 0,
        currentPage: 0,
        pageSize: 10,
    };
    tableLoading: boolean = false;
    columns: any[] = [];
    tableColumns: any[] = [
        {
            type: 'checkbox',
            selectedAll: false,
            fixed: 'left',
            align: 'center',
            width: 60,
        },
        {
            title: '事件ID',
            field: 'requestId',
            minWidth: 130,
        },
        {
            title: '任务标题',
            field: 'title',
            minWidth: 200,
        },
        {
            title: '流程名称',
            field: 'processName',
            minWidth: 130,
        },
        {
            title: '发起时间',
            field: 'startDate',
            minWidth: 130,
            render: (value, row) => (dateFormat(value) + ' ' + timeFormat(row.startTime)).trim() || '--',
        },
        {
            title: '投资经理',
            field: 'dealUser',
            minWidth: 130,
        },
        {
            title: '任务状态',
            field: 'status',
            minWidth: 130,
            render: value => {
                return this.statusPojo[value];
            },
        },
        {
            title: '失败原因',
            field: 'errorMsg',
            minWidth: 130,
        },
    ];

    tableColumnsH: any[] = [
        // 复选框无用  TODO
        {
            type: 'checkbox',
            selectedAll: false,
            fixed: 'left',
            align: 'center',
            width: 60,
        },
        {
            title: '事件ID',
            field: 'requestId',
            minWidth: 130,
        },
        {
            title: '任务标题',
            field: 'title',
            minWidth: 200,
        },
        {
            title: '流程名称',
            field: 'processName',
            minWidth: 130,
        },
        {
            title: '发起时间',
            field: 'startDate',
            minWidth: 130,
            render: (value, row) => (dateFormat(value) + ' ' + timeFormat(row.startTime)).trim() || '--',
        },
        {
            title: '投资经理',
            field: 'dealUser',
            minWidth: 130,
        },
        {
            title: '任务状态',
            field: 'status',
            minWidth: 130,
            render: value => {
                return this.statusPojo[value];
            },
        },
        {
            title: '失败原因',
            field: 'errorMsg',
            minWidth: 130,
        },
        {
            title: '操作人',
            field: 'startUser',
            minWidth: 130,
        },
        {
            title: '重发日期',
            field: 'reStartDate',
            minWidth: 130,
            render: (value, row) => (dateFormat(value) + ' ' + timeFormat(row.reStartTime)).trim() || '--',
        },
    ];

    statusPojo: any = { '1': '发起成功', '2': '发起失败', '3': '重发成功', '4': '删除任务', '5': '转已办失败', '6': '转已办成功' };

    @Prop() type: string;
    @Prop() activeValue: string;
    isFirst: boolean = true;
    @Watch('activeValue', { immediate: true })
    handleActiveValue() {
        if (this.activeValue === 'oa-current-task' || this.activeValue === 'oa-history-task') {
            if (this.isFirst) {
                this.isFirst = false;
                this.columns = this.type == 'current' ? this.tableColumns : this.tableColumnsH;
                this.getTableData();
            }
        }
    }
    /**
     * 表格数据
     */
    getTableData() {
        this.tableLoading = true;
        const requestName = this.type == 'current' ? API.queryOaTask : API.queryHistoryOaTask;
        return new Promise((resolve, reject) => {
            requestName({ ...this.searchParams, paging: this.paging })
                .then((res: any) => {
                    this.tableData = res?.list || [];
                    this.paging.total = res?.total || 0;
                    resolve(res);
                })
                .catch(err => {
                    // this.tableData = [
                    //     {
                    //         requestId: '12',
                    //         title: '待调整的投资比例超限：共 X 条，Y条待反馈调整方案',
                    //         processName: '投资监督',
                    //         startDate: '20230419',
                    //         startTime: '141020',
                    //         startUser: 'xz',
                    //         status: '1',
                    //         errorMsg: '',
                    //     },
                    //     {
                    //         requestId: '13',
                    //         title: '待调整的投资比例超限：共 X 条，Y条待反馈调整方案',
                    //         processName: '投资监督',
                    //         startDate: '20230419',
                    //         startTime: '141020',
                    //         reStartDate: '20230510',
                    //         reStartTime: '131010',
                    //         startUser: 'administrator',
                    //         status: '2',
                    //         errorMsg: '失败原因',
                    //     },
                    // ];
                    reject(err);
                })
                .finally(() => {
                    this.tableLoading = false;
                });
        });
    }

    /**
     * 按钮操作
     */
    handleButton(type: string) {
        if (type == 'search') {
            this.paging.currentPage = 1;
            this.getTableData();
        } else if (type == 'reStart' || type == 'delete') {
            let name = '';
            let requestName;
            if (type == 'reStart') {
                name = '重新发起';
                requestName = API.addOaTodo;
            } else if (type == 'delete') {
                name = '删除';
                requestName = API.deleteOaTask;
            }
            const checkRowKeys = (this.$refs['risk-table-' + this.type] as VueObject).checkRowKeys;
            if (checkRowKeys.length < 1) {
                this.yh_message_info(`请先勾选需${name}的数据！`);
                return;
            }
            requestName({ requestIdList: checkRowKeys }).then(() => {
                this.yh_message_success(name + '成功');
                this.paging.currentPage = 1;
                this.getTableData();
                // 清除导出时列表勾选项
                this.$nextTick(() => {
                    (this.$refs['risk-table-' + this.type] as any).resetCheckRowKeys();
                });
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.oa-current {
    height: 100%;
}
#header-operate {
    #header-query {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /deep/ .el-form-item {
            margin-bottom: 4px;
            .el-form-item__label {
                color: black;
                padding-right: 2px;
            }
        }
    }
}
</style>
